<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="header flex text-center">
				<view class="cu-item flex-sub f-size" :class="index==TabCur?'text-color cur ':''" v-for="(item,index) in list" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</view>
			<view class="main">
				<view class="main-box">
					<form>
						<view v-if="TabCur ==0" class="cg-main">
							<view class="">
								<view class="cu-form-group">
									<view class="title">单据编号:</view>
									<input class="inpt" disabled="true" name="input"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">单据日期：</view>
									<view @tap="open()" class="inpt1">
										<input disabled="true">{{timeData.fulldate}}</input>
									</view>
								</view>
								<view class="cu-form-group">
									<view class="title">供应商:</view>
									<picker @change="PickerChange" :value="index1" :range="picker">
										<view class="picker">
											{{index1>-1?picker[index1]:''}}
										</view>
									</picker>
								</view>
								<view class="cu-form-group">
									<view class="title">业务员:</view>
									<picker @change="PickerChange1" :value="index1" :range="picker1">
										<view class="picker">
											{{index1>-1?picker1[index1]:''}}
										</view>
									</picker>
								</view>
								<view class="cu-form-group">
									<view class="title">备注：</view>
									<input class="inpt" name="input"></input>
								</view>
								<!--下拉框-->
								<!--
								<view wx:if="{{showfilter}}">
								        <view class="filter-panel" wx:if="{{showfilterindex==1}}">
								          <view class="filter-panel-center">
								            <view wx:for="{{filterdata.type}}" wx:key="{{item.id}}" bindtap="setTypeIndex" data-typeindex="{{index}}" data-typeid="{{item.id}}" class="center-span {{typeindex==index?'active':''}}">{{item.type}}</view>
								          </view>
								        </view>
								      </view>-->
							</view>

						</view>
						<view v-if="TabCur ==1" class="cg-detail">
							<view>
								<view class="searchInput">
									<!-- <view class="goodType">
										<text @tap="showType()">{{typeName}}&nbsp;></text>
										<view class="allGoodsType" v-if="isShowGoodsType!=0">
											<view class="typeTitle" @tap="setTypeName('全部分类')">全部分类<text class="pulljt">></text></view>
											<text class="typeItem" @tap="setTypeName('平板电脑')">平板电脑</text>
										</view>
									</view> -->
									<view class="goodFilter">
										<uniIcon type="search" size="14" style="line-height: 28px;margin-left: 5px;margin-right: 5px;color: #a7aab3;" /><input
										 placeholder="商品代码/品名规格/供应商" class="searchOption"></input>
									</view>
									<view class="searchOptions">
										<button class="giveSong"></button>
										<button class="getPicture" @tap="getSm()"></button>
									</view>
								</view>
							</view>
							<view class="detail-box">
								<view class="cu-form-group">
									<view class="title">商品名称：</view>
									<input class="inpt" name="input"></input>
									<button class="cu-btn round stop text-white" @tap="gogoodlist">查询</button>
								</view>
								<view class="cu-form-group">
									<view class="title">编号：</view>
								</view>
								<view class="cu-form-group">
									<view class="title">单价：</view>
									<button class="cu-btn round stop text-white">查询</button>
								</view>
								<view class="cu-form-group">
									<view class="title">单位：</view>
									<input class="inpt" name="input" :value="unitselected"></input>
									<button class="cu-btn round stop text-white" @tap="showModal" data-target="Modal">查询</button>
								</view>
								<view class="cu-form-group">
									<view class="title">数量：</view>
									<input class="inpt" name="input"></input>
								</view>
								<view class="cu-form-group">
									<view class="title">批号：</view>
									<input class="inpt" name="input"></input>
									<button class="cu-btn  stop text-white" @tap="gopici">查询</button>
								</view>
								<view class="cu-form-group">
									<view class="title">备注：</view>
									<input class="inpt" name="input"></input>
								</view>
							</view>
							<!--商品明细列表-->
							<view>

							</view>
						</view>

					</form>
				</view>

			</view>
		</scroll-view>
		<!--单位弹窗-->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog ls-main">
				<view class="cu-bar bg-ls justify-between">
					<view class="action">
						<view class="cuIcon-info text-white"></view>
					</view>
					<view class="content text-white">选择单位</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-white"></text>
					</view>
				</view>
				<view class="padding text-left bg-white ls-contain">
					<scroll-view scroll-y style="height: 500px;padding-bottom: 100px">
						<view class="ls-box" @tap="choosesunit" v-for="(item,index) in unitslist" :key='index' :data-unit="item.unit">
							<!-- <view class="text-black">数据库：</view> -->
							<view>{{item.unit}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
	</view>
</template>

<script>
	import allConst from "../../Json.js"
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				isShowGoodsType: 0,
				typeName: "全部分类",
				date: '',
				timeData: {
					clockinfo: '',
					date: '',
					fulldate: '',
					lunar: '',
					month: '',
					range: '',
					year: ''
				},
				munelist: [{
					title: '单据信息',
				}, {
					title: '商品明细'
				}],
				TabCur: 0,
				scrollLeft: 0,
				index: 0,
				index1: 0,
				picker: ['批发客户', '零售客户', '批发价1客户'],
				picker1: ['张三', '李四', '王五'],
				list: [{
						index: 0,
						name: "单据信息"
					},
					{
						index: 1,
						name: "商品明细"

					}
				],
				modalName: '',
				unitslist: [{
					unit: "件"
				}, {
					unit: "箱"
				}],
				unitselected: ''
			}
		},
		components: {
			uniCalendar,
			uniIcon
		},
		onLoad() {
			setTimeout(() => {
				this.showCalendar = true
			}, 350)
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log(22)
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			PickerChange(e) {
				console.log(e)
				this.index = e.detail.value
			},
			PickerChange1(e) {
				console.log(e)
				this.index = e.detail.value
			},
			xiala(e) {
				var i = e.currentTarget.dataset.findex;
				console.log(i)

			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				// var fulldate = e.detail.fulldate
				// console.log(e.detail.fulldate);
				console.log(e)
				this.timeData = e
			},
			gogoodlist() {
				uni.navigateTo({
					url: "../goodList/goodList"
				})
				console.log(3333)
			},
			//显示全部分类
			showType: function() {
				if (this.isShowGoodsType == 0) {
					this.isShowGoodsType = 1;
				} else {
					this.isShowGoodsType = 0;
				}

			},
			//选择批号
			gopici() {
				uni.navigateTo({
					url: "choosepici/choosepici"
				})
			},
			showModal(e) {
				console.log(1111)
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				console.log(222)
				this.modalName = null

			},
			choosesunit(e) {
				console.log(e)
				var unit = e.currentTarget.dataset.unit
				this.unitselected = unit
				this.modalName = null
			}

		}

	}
</script>

<style>
	page {
		background-color: #EEEEEE;
	}

	.header {
		position: fixed;
		z-index: 100;
		width: 100%;
		background: #fff;
		height: 45px;
	}

	.stop {
		background-color: rgb(96, 188, 204);
	}

	.text-color {
		color: rgba(124, 170, 216, 1);
	}

	.f-size {
		font-size: 16px;
	}

	.main {
		padding-top: 55px;
		background: #EEEEEE;
	}

	.inpt1 {
		width: 100%;
		text-align: right;
		align-items: center;
		display: flex;
	}

	.detail-box {
		padding-top: 40px;
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		position: relative;
		background-color: #fdfdfd;
		border-bottom: 1px #f5f5f5 solid
	}

	.example-title__after {
		position: relative;
		color: #031e3c
	}

	.example-title:after {
		content: '';
		position: absolute;
		left: 30upx;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 6upx;
		height: 32upx;
		background-color: #ccc
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 30upx;
		background: #fff
	}

	.example-info {
		padding: 30upx;
		color: #3b4144;
		background: #fff
	}

	.calendar-content {
		padding-bottom: 100upx;
		font-size: 26upx;
	}

	.calendar-content-active {
		padding-bottom: 450upx;
	}

	.calendar-tags-group {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.calendar-tags {
		width: 100%;
		box-sizing: border-box;
	}

	.calendar-tags-item {
		padding: 20upx 20upx;
		border: 1px rgba(0, 0, 0, 0.2) solid;
		color: #333;
		border-radius: 10upx;
		text-align: center;
		margin: 10upx;
		background: #f8f8f8;
	}

	.calendar-tags-item:active {
		background: #f8f8f8;
	}

	.checked .calendar-tags-item {
		background: rgb(0, 122, 255);
		color: #fff;
		border: 1px rgba(0, 0, 0, 0.1) solid;
	}

	.calendar-button {
		font-weight: bold;
		font-size: 32upx;
	}

	.calendar-button-groups {
		position: absolute;
		width: 100%;
		bottom: 0;
		display: flex;
	}

	.calendar-button-confirm {
		width: 50%;
		margin: 10upx;
		border: 1px #eee solid;
		font-size: 32upx;
	}

	.calendar-button-confirm:after {
		border: none;
	}

	.calendar-box {
		position: fixed;
		bottom: 0;
		background: #fff;
		color: #444;
		line-height: 1.5;
		width: 100%;
		transition: all 0.3s;
		transform: translateY(320upx);
		/* background: #f5f5f5; */
	}

	.calendar-active {
		transform: translateY(0);
	}

	.calendar-info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		padding-left: 0;
		border-top: 1px #eee solid;
		border-bottom: 1px #eee solid;
	}

	.calendar-title {
		/* height: 80upx; */
		font-weight: bold;
		color: #666;
		font-size: 32upx;
		border-left: 2px #0d9ebb solid;
		padding-left: 20upx;
		margin: 0 20upx;
	}

	.calendar-info {
		overflow-y: scroll;
		height: 260upx;
		padding: 30upx 30upx;
	}

	/*搜索*/
	/* .goodContainer{
		flex: 1;
		margin-top: 60px;
		padding-bottom: 55px;
	} */
	.searchInput {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: #FFF;
		display: flex;
		flex-direction: row;
		position: fixed;
		background: #FFF;
		z-index: 999;
	}

	.searchInput .goodType {
		background: #f1f2f7;
		border-radius: 20px;
		height: 28px;
		line-height: 28px;
		color: #9699a2;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
		margin-top: 6px;
		margin-left: 10px;
	}

	.searchInput .goodFilter {
		flex: 1;
		display: flex;
		background: #eff2fb;
		border-radius: 20px;
		height: 30px;
		line-height: 30px;
		margin-top: 6px;
		box-sizing: border-box;
		margin-left: 10px;
		margin-right: 5px;
	}

	.searchInput .goodFilter .searchOption {
		flex: 1;
		height: 28px;
		line-height: 28px;
		font-size: 28upx;
		color: #9699a2;
	}

	.searchInput .searchOptions {
		width: 70px;
		height: 40px;
		display: flex;
		flex-direction: row;
		padding-top: 7.5px;
	}

	.searchInput .searchOptions .giveSong {
		width: 25px;
		height: 25px;
		background: url(../../static/lysong.png) no-repeat;
		padding: 0px;
	}

	.searchInput .searchOptions .getPicture {
		width: 25px;
		height: 25px;
		background: url(../../static/sm.png) no-repeat;
		padding: 0px;
	}

	.allGoodsType {
		width: 100%;
		height: calc(100% - 50px);
		background: #FFF;
		position: fixed;
		top: 90px;
		left: 0px;
		z-index: 99999;
	}

	.allGoodsType .typeTitle {
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #000;
		padding-left: 15px;
		border-bottom: 1px solid #ebebeb;
		box-sizing: border-box;
		padding-right: 15px;
		font-size: 32upx;
	}

	.allGoodsType .typeTitle .pulljt {
		display: inline-block;
		float: right;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* IE 9 */
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
	}

	.allGoodsType .typeItem {
		display: block;
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ebebeb;
		margin-left: 15px;
		padding-left: 5px;
		font-size: 28upx;

	}


	/*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/
	.mytran-transition {
		transition: all 0.3s ease;
		opacity: 1;
	}

	/* .mytran-enter 定义进入的开始状态 */
	/* .mytran-leave 定义离开的结束状态 */
	.mytran-enter,
	.mytran-leave {
		height: 0;
	}

	/*弹窗*/
	.ls-box {
		font-size: 16px;
		padding: 5px 0;
		border-bottom: 1rpx #E1D7F0 solid;
		color: #24292E;
	}

	.bg-ls {
		background-color: rgba(33, 167, 191, 1);
		position: fixed;
		width: inherit;
		height: 50px;
		z-index: 100;
	}

	.ls-main {
		max-height: 70%;
	}

	.ls-contain {
		padding-top: 50px;
		height: inherit;
	}
</style>
